<template>
  <div>
    <div class="bread">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"> 首页 </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/sms/coupon' }">
          订单
        </el-breadcrumb-item>
        <el-breadcrumb-item>退货原因详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
  <div class="card">
    <el-card class="box-card">
      <el-steps
        :active="active"
        align-center
        style="width: 90%; margin: 0 auto"
        finish-status="success"
      >
        <el-step title="提交订单" :description="getDate(objDate.createTime)" />
        <el-step title="支付订单" :description="getDate(objDate.paymentTime)" />
        <el-step title="平台发货" :description="getDate(objDate.receiveTime)" />
        <el-step
          title="确认收货"
          :description="getDate(objDate.deliveryTime)"
        />
        <el-step title="完成评价" :description="getDate(objDate.commentTime)" />
      </el-steps>
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          padding: 10px;
          height: 80px;
          line-height: 80px;
          background: color #f2f6fc;
        "
      >
        <span style="color: red">
          <el-icon>
            <Warning />
          </el-icon>
          <span> 当前订单状态：已关闭 </span>
        </span>
        <div>
          <el-button @click="del">删除订单</el-button>
          <el-button @click="handleClose">备注订单</el-button>
        </div>
      </div>
      <div>
        <div style="margin: 20px">
          <el-icon>
            <Briefcase />
          </el-icon>
          基本信息
        </div>

        <el-table :data="tableData" :border="true" style="width: 100%">
          <el-table-column prop="orderSn" class="el-col-4" label="订单编号" />
          <el-table-column label="发货流水线" class="el-col-4">
            <template #default="scope">
              <div>
                {{
                  scope.row.billReceiverPhone == null
                    ? "暂无"
                    : scope.row.billReceiverPhone
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="memberUsername"
            class="el-col-4"
            label="用户账户"
          />
          <el-table-column label="支付方式" class="el-col-4">
            <template #default="scope">
              <div>
                {{ scope.row.billType == null ? "未支付" : scope.row.billType }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单来源" class="el-col-4">
            <template #default="scope">
              <div>App订单</div>
            </template>
          </el-table-column>
          <el-table-column label="订单类型" class="el-col-4">
            <template #default="scope">
              <div>
                {{ scope.row.orderType === 0 ? "正常类型" : "其他类型" }}
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-table :data="tableData" :border="true" style="width: 100%">
          <el-table-column label="配送方式" class="el-col-4">
            <template #default="scope">
              <div>
                {{
                  scope.row.ProprotionInfo == null
                    ? "暂无"
                    : scope.row.billReceiverPhone
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="物流单号" class="el-col-4">
            <template #default="scope">
              <div>
                {{
                  scope.row.integrationAmount == 0 ? "暂无" : scope.row.billType
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="自动收货时间" class="el-col-4">
            <template #default="scope">
              <div>{{ scope.row.autoConfirmDay }}天</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="integration"
            label="订单可得优币"
            class="el-col-4"
          />
          <el-table-column
            prop="integration"
            label="订单可得值"
            class="el-col-4"
          />
          <el-table-column
            prop="promotionInfo"
            label="活动信息"
            class="el-col-4"
            :show-overflow-tooltip="true"
          />
        </el-table>
        <div style="margin: 20px">
          <el-icon>
            <Briefcase />
          </el-icon>
          收货人信息
        </div>
        <el-table :data="tableData" :border="true" style="width: 100%">
          <el-table-column
            prop="receiverName"
            label="收货人"
            class="el-col-3"
          />
          <el-table-column
            prop="receiverPhone"
            label="手机号"
            class="el-col-3"
          />
          <el-table-column
            prop="receiverPostCode"
            label="邮政编码"
            class="el-col-3"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="收货地址" class="el-col-3">
            <template #default="scope">
              <div>
                {{ scope.row.receiverProvince }}{{ scope.row.receiverCity
                }}{{ scope.row.receiverRegion
                }}{{ scope.row.receiverDetailAddress }}
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 20px">
          <el-icon>
            <Briefcase />
          </el-icon>
          商品信息
        </div>
        <el-table :data="goodslist" :border="true" style="width: 100%">
          <el-table-column label="商品信息">
            <template #default="scope">
              <div>
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.productPic"
                  fit="cover"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品名称">
            <template #default="scope">
              <div>
                {{ scope.row.productName }}
              </div>
              <div>品牌：{{ scope.row.productBrand }}</div>
            </template>
          </el-table-column>
          <el-table-column label="价格/货号" width="180">
            <template #default="scope">
              <div>价格：￥{{ scope.row.productPrice }}</div>
              <div>货号：{{ scope.row.productSn }}</div>
            </template>
          </el-table-column>
          <el-table-column label="属性" width="180">
            <template #default="scope">
              <span v-for="item in ListArray(scope.row.productAttr)"
                >{{ item.key }}:{{ item.value }};</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="productQuantity" label="数量" width="100" />
          <el-table-column label="小计" width="105">
            <template #default="scope">
              <div>
                ￥{{
                  Number(scope.row.productPrice) *
                  Number(scope.row.productQuantity)
                }}
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin: 20px">
          <el-icon>
            <Briefcase />
          </el-icon>
          费用信息
        </div>

        <el-table :data="tableData" :border="true" style="width: 100%">
          <el-table-column label="商品合计" class="el-col-3">
            <template #default="scope">
              <div>￥{{ scope.row.totalAmount }}</div>
            </template>
          </el-table-column>
          <el-table-column label="运费" class="el-col-3">
            <template #default="scope">
              <div>￥{{ scope.row.freightAmount }}</div>
            </template>
          </el-table-column>
          <el-table-column label="优惠券" class="el-col-3">
            <template #default="scope">
              <div>-￥{{ scope.row.couponAmount }}</div>
            </template>
          </el-table-column>
          <el-table-column label="积分抵扣" class="el-col-3">
            <template #default="scope">
              <div>-￥{{ scope.row.confirmStatus }}</div>
            </template>
          </el-table-column>
        </el-table>

        <el-table :data="tableData" :border="true" style="width: 100%">
          <el-table-column label="活动优惠" class="el-col-3">
            <template #default="scope">
              <div>-￥{{ scope.row.promotionAmount }}</div>
            </template>
          </el-table-column>
          <el-table-column label="折扣金额" class="el-col-3">
            <template #default="scope">
              <div>-￥{{ scope.row.discountAmount }}</div>
            </template>
          </el-table-column>
          <el-table-column label="订单总金额" class="el-col-3">
            <template #default="scope">
              <div style="color: red">
                -￥{{
                  scope.row.totalAmount -
                  scope.row.discountAmount -
                  scope.row.couponAmount
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="积分抵扣" class="el-col-3">
            <template #default="scope">
              <div style="color: red">
                -￥{{
                  scope.row.totalAmount -
                  scope.row.discountAmount -
                  scope.row.couponAmount -
                  scope.row.promotionAmount -
                  scope.row.confirmStatus +
                  scope.row.freightAmount
                }}
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div style="margin: 20px">
          <el-icon>
            <Briefcase />
          </el-icon>
          操作信息
        </div>
        <el-table :data="operateManList" :border="true" style="width: 100%">
          <el-table-column prop="operateMan" label="操作者" width="100" />
          <el-table-column label="操作时间">
            <template #default="scope">
              <div>
                {{
                  scope.row.createTime
                    ? dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")
                    : ""
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" width="100">
            <template #default="scope">
              <div>已关闭</div>
            </template>
          </el-table-column>
          <el-table-column label="付款状态" width="100">
            <template #default="scope">
              <div>已退款</div>
            </template>
          </el-table-column>
          <el-table-column label="发货状态" width="100">
            <template #default="scope">
              <div>已发货</div>
            </template>
          </el-table-column>
          <el-table-column prop="note" label="备注" />
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { reactive, ref } from "vue";
import type { Ref } from "vue";
import * as api from "../../request/api";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

interface User {
  num: number | string;
  name: string;
}
const textarea = ref("");
let tableData = ref<any[]>([]); // 表格信息数组
// let tableData = reactive([]); // 表格信息数组
const multiple = ref<User[]>([]);
// 定义当前状态
const active = ref(1);

const route = useRoute();
// 接收参数id
let id = route.query.id;

// 转数组
let ListArray = (param: string): any => {
  if (param) {
    return JSON.parse(param);
  }
  return [];
};

// 商品信息
let goodslist = ref([]) as Ref<
  {
    couponAmountcouponAmount: string;
    giftIntegration: string;
    id: number;
    integrationAmount: string;
    orderId: number;
    orderSn: string;
    productAttr: [
      {
        key: string;
        value: string;
      }
    ];
    productBrand: string;
    productCategoryId: number;
    productId: number;
    productName: string;
    productPic: string;
    productPrice: number;
    productQuantity: number;
    productSkuCode: string;
    productSkuId: number;
    productSn: string;
    promotionAmount: string;
    promotionName: string;
    realAmount: string;
    types?: object[];
  }[]
>;
// 操作信息
let operateManList = ref([]) as Ref<
  {
    createTime: string;
    id: number;
    note: string;
    operateMan: string;
    orderId: number;
    orderStatus: number;
  }[]
>;
interface IObjDataInter {
  commentTime: string;
  createTime: string;
  deliveryTime: string;
  modifyTime: string;
  paymentTime: string;
  receiveTime: string;
}

let objDate = ref({}) as Ref<IObjDataInter>;
// 接收数据
let onSeceive = async () => {
  let Seceived = await api.order.orderDetail({ id });
  console.log(Seceived);
  tableData.value.push(Seceived);
  //   商品信息
  goodslist.value = Seceived.orderItemList;
  //   操作信息
  operateManList.value = Seceived.historyList;
  //   当前状态
  active.value = Seceived.status;
  //   提交状态
  objDate.value.deliveryTime = Seceived.deliveryTime;
  objDate.value.commentTime = Seceived.commentTime;
  objDate.value.createTime = Seceived.createTime;
  objDate.value.modifyTime = Seceived.modifyTime;
  objDate.value.paymentTime = Seceived.paymentTime;
  objDate.value.receiveTime = Seceived.receiveTime;
};
onSeceive();
console.log(tableData);

console.log(goodslist.value);

// 删除
let del = () => {
  ElMessageBox.confirm("是否要进行该删除操作?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
// 备注订单
let note = ref(false);
const handleClose = () => {
  ElMessageBox.confirm("是否要备注订单?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      ElMessage({
        type: "success",
        message: "备注订单成功",
      });
      note.value = false;
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消备注",
      });
    });
};

// 状态
function getDate(val: string): string {
  return val ? dayjs(val).format("YYYY-MM-DD HH:mm:ss") : "";
}
</script>

<style scoped lang="scss">
.card {
  margin: 30px auto;
  margin-top: 60px;
  margin-bottom: 30px;
  width: 1080px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep .cell {
  text-align: center;
}

.card {
  widows: 80%;
  margin: 60px auto;
}

.el-col-4 {
  width: 16.66%;
}

.el-col-4 {
  width: 25%;
}
</style>
